<template>
	<view class="qualityTesting_container" :data-theme="theme">
		<view class="box">

			<!-- 头部标签导航 -->
			<view class="qualityTesting_header">
				<!-- 	<u-tabs :list="tabsList" @click="tabsClickHandle" :lineColor="bgColor"></u-tabs> -->
				<tab-bar style="background-color: #FFF;" :tabList="tabsList" :tabIndex.sync="currentIndex"></tab-bar>
			</view>
			<!-- 导航搜索 -->
			<view class="navSelection">
				<!-- 验收搜索 -->
				<view style="display: flex;flex-flow: row;">
					<picker @change="checkAndAcceptChange" @cancel="checkAndAcceptCancel" @click="checkAndAcceptClick"
						:value="checkAndAcceptIndex" :range="checkAndAcceptList" range-key="name" style="display: flex;"
						:color="bgColor">
						<view style="display: flex;">

							<view style="font-size: 14px;margin-right: 6rpx;" v-if="isCheckAndAccept">
								验收方式
							</view>
							<view style="font-size: 14px;margin-right: 6rpx;" v-else="isCheckAndAccept">
								{{ checkAndAcceptList[checkAndAcceptIndex].name }}
							</view>
							<u-icon :name="checkAndAcceptShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
						</view>
					</picker>

				</view>
				<!-- 仓库搜索 -->
				<view style="display: flex;flex-flow: row;">
					<picker @change="warehouseChange" @cancel="warehouseCancel" @click="warehouseClick"
						:value="warehouseIndex" :range="warehouseList" range-key="depotName" style="display: flex;">
						<view style="display: flex;">
							<view style="font-size: 14px;margin-right: 6rpx;" v-if="isWarehouse">仓库选择
							</view>
							<view style="font-size: 14px;margin-right: 6rpx;" v-else='isWarehouse'>
								{{ warehouseList[warehouseIndex].depotName }}
							</view>
							<u-icon :name="warehouseShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
						</view>
					</picker>

				</view>
				<!-- 今日搜索 -->
				<view style="display: flex;flex-flow: row;" @click="todayClickHandle">
					<uni-datetime-picker v-model="range" type="daterange" @change="todayConfirmHandle" :color="bgColor">
						<view style="display: flex;">
							<view style="font-size: 14px;margin-right: 6rpx;">{{ date ? date: '选择日期' }}
							</view>
							<u-icon name="arrow-up-fill" size="12"></u-icon>
						</view>
					</uni-datetime-picker>

				</view>
			</view>
			<!-- 时间弹窗 -->
			<!-- <u-calendar :show="todayShow" mode="range" :min-date='calendar.minDate' :monthNum="calendar.monthNum"
				:max-date="calendar.maxDate" @confirm="todayConfirmHandle" @close="todayCloseHandle"
				:closeOnClickOverlay="true" :color="bgColor">
			</u-calendar> -->
		</view>

		<scroll-view scroll-y="true" class="qualityTesting_content" @scrolltolower="scrolltolowerFn">
			<qualityTestingListItem :qualityTestList="qualityTestList"></qualityTestingListItem>
			<!-- 质检内容 -->
			<view v-if="!qualityTestList.length">
				<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
			<!-- 上拉加载更多 -->
			<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>
		</scroll-view>

	</view>
</template>

<script>
	import tabBar from '@/components/tab-bar/tab-bar.vue';
	import qualityTestingListItem from "../components/qualityTestingListItem/qualityTestingListItem.vue";
	import {
		qualityTestListApi,
		queryDepotInformationApi
	} from "@/api/qualityTest.js"
	import {
		setThemeColor
	} from "../../../utils/setTheme";
	let app = getApp();
	export default {
		components: {
			qualityTestingListItem,
			tabBar,
		},
		data() {

			return {

				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tabsList: [{ // 标签列表
					name: '质量验收'
				}],
				currentIndex: 0,
				// 验收搜索
				isCheckAndAccept: true, // 验收方式展示
				checkAndAcceptIndex: 0, // 验收索引值
				checkAndAcceptList: [{ // 验收列表
					name: "入库验收",
					value: "1"
				}, {
					name: "库内质检",
					value: "2"
				}],
				checkAndAcceptShow: true, // 验收列表显示
				// 仓库搜索
				isWarehouse: true, // 仓库方式展示
				warehouseIndex: 0, // 验收索引值
				warehouseList: [], // 仓库信息
				warehouseShow: true, // 验收列表显示
				// 今日搜索
				todayShow: false,
				date: '',
				AlertDescription: "以下为质量验收不合格结果清单，请核验并改进商品质量",
				// 今日时间
				todayTime: '',
				// 历史日期
				calendar: {
					minDate: '',
					maxDate: '',
					monthNum: 13,
				},

				// 获取质检数据的参数
				params: {
					current: 1,
					size: 10,
				},
				qualityTestList: [],
				totalPage: 1,
				loadMoreStatus: 'noMore' ,//加载更多
				range:[],

			}
		},
		created() {
			this.today()
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.initData()
			// 获取仓库信息
			this.queryDepotInformation()
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.params.current = 1;
				this.loadMoreStatus = 'more';
				this.getQualityTestList();
			},

			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.params.current++;
				this.getQualityTestList(true);
			},

			// 获取今日时间
			today() {
				let today = new Date();
				let year = today.getFullYear();
				let month = String(today.getMonth() + 1).padStart(2, '0');
				let day = String(today.getDate()).padStart(2, '0');

				let minYear = year - 1;
				this.todayTime = year + '-' + month + '-' + day;
				this.calendar.maxDate = year + '-' + month + '-' + day;
				this.calendar.minDate = minYear + '-' + month + '-' + day;
			},
			// 标签列表点击事件

			tabsClickHandle() {},
			// 验收搜索事件
			checkAndAcceptChange(e) {
				this.params.current = 1
				this.isCheckAndAccept = false
				this.checkAndAcceptIndex = e.detail.value
				this.checkAndAcceptShow = true
				this.params.acceptance = this.checkAndAcceptList[this.checkAndAcceptIndex].value
				this.qualityTestList = []
				this.getQualityTestList()
			},
			checkAndAcceptCancel() {
				this.checkAndAcceptShow = true
				// this.dateShow = true
			},
			checkAndAcceptClick() {
				this.checkAndAcceptShow = false
			},
			// 仓库搜索事件
			warehouseChange(e) {
				this.params.current = 1
				this.isWarehouse = false
				this.warehouseIndex = e.detail.value
				this.warehouseShow = true
				this.params.depotId = this.warehouseList[this.warehouseIndex].depotId
				this.qualityTestList = []
				this.getQualityTestList()
			},
			warehouseCancel() {
				this.warehouseShow = true
				// this.dateShow = true
			},
			warehouseClick() {
				this.warehouseShow = false
			},
			// 今日搜索
			todayClickHandle() {
				this.todayShow = true
			},
			// 选择的时间
			todayConfirmHandle(e) {
				this.params.current = 1
				this.todayShow = false
				this.date = e[0].slice(5) + e[e.length - 1].slice(4)
				// 在起始时间和结束时间的字符串后面加上 "00:00:00" 和 "23:59:59"
				this.params.beginTime = e[0] + ' 00:00:00'
				this.params.endTime = e[e.length - 1] + ' 23:59:59'
				this.getQualityTestList()
			},
			todayCloseHandle() {
				this.todayShow = false
			},
			// 获取质检列表
			async getQualityTestList(isMerge) {
				if (this.params.depotId == -1) {
					delete this.params.depotId
				}
				try {
					let that = this;
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					if (!isMerge) {
						this.params.current = 1;
						this.loadMoreStatus = 'more';
					}
					let result = await qualityTestListApi(this.params)
					if (result.code == 200) {
						let data = result.data.records.map(item => ({
							...item,
							productInfo: JSON.parse(item.productInfo)
						}));
						// 格式化
						if (isMerge) {
							that.$util.SplitArray(data, that.qualityTestList);
						} else {

							that.qualityTestList = data
						}
						that.totalPage = result.data.pages;
						if (result.data.pages == this.params.current) {
							that.loadMoreStatus = 'noMore';
						}
						uni.hideLoading();
					}
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading();
					console.log(e)
					this.$util.Tips({
						title: e
					})
				}
			},
			// 获取仓库列表
			async queryDepotInformation() {
				try {
					let result = await queryDepotInformationApi()

					this.warehouseList = result.data.list
					this.warehouseList.unshift({
						depotId: -1,
						depotName: '全部'
					})
				} catch (e) {
					//TODO handle the exception
					this.$util.Tips({
						title: e
					})
					console.log(e)
				}
			},

		}
	}
</script>

<style scoped lang='scss'>
	page {
		height: 100%;
	}

	/* 违规内容 */
	::v-deep .u-empty {
		background-color: #f8f8f8;
		padding-top: 200px;
	}

	.qualityTesting_container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		height: 100%;

		.box {

			.qualityTesting_header {
				background-color: white;
			}

			.navSelection {
				background-color: white;
				display: flex;
				justify-content: space-around;
				padding: 12px;
			}
		}


		.qualityTesting_content {
			flex: 1;
			min-height: 200px;
		}

	}
</style>